<template>
  <div>
    <div class="Order">
      <div class="address flex">
        <div class="a1 selfCtenter"><i class="icon icon_location"></i></div>
        <div class="a2 selfCtenter">
          <p class="receiver"><span class="inline-block text-overflow">收货人:<span
            style="padding-left:5px">悦龄会</span></span> <span class="fr">19568956895</span></p>
          <p>收货地址：北京市朝阳区3环以内劲松3区11号北京市朝阳区3环以内劲松3区11号</p>
        </div>
        <div class="a3 selfCtenter">
          <i class="icon "></i>
        </div>
      </div>
      <img src="../../assets/address_bg.png"/>

      <div class="orderinfo flex-verticle">
        <div class="goodInfo flex">
          <img src="/img/goods.08dec18.png">
          <div class="selfCtenter">
            <p class="gtitle">一副不折断的老花镜，仅1张名片重量，树脂蓝 光老花眼镜</p>
            <p class="fee">￥2000（免运费） <span class="number"> x1 </span></p>
          </div>
        </div>
        <div class="sendway">
          <p class="fl">配送方式</p>
          <div class="fr">
            <p>￥0.00</p>
            <p>快递发货</p>
          </div>
        </div>

        <div class="sendway flex">
          <div class="m1">
            <span>买家留言：</span>
            <input type="text" placeholder="点击给商家留言"/>
          </div>
        </div>
        <div class="sendway coupon" @click="isshow = true">
          <p class="fl">优惠</p>
          <div class="fr">
            <div><span class="usecoupon">使用优惠券</span> <i class="icon "></i></div>
          </div>
        </div>
        <div class="sendway coupon">
          <p class="fl">短信通知收件人</p>
          <div class="fr">
            <div>
              <q-toggle v-model="checked"></q-toggle>
            </div>
          </div>
        </div>
        <div class="sendway smallsize">
          <div class="over-hidden">
            <p class="fl">商品金额</p>
            <div class="fr">
              <p>￥200.00</p>
            </div>
          </div>
          <div class="over-hidden">
            <p class="fl">运费</p>
            <div class="fr">
              <p>￥0.00</p>
            </div>
          </div>
        </div>

      </div>

      <div class="orderFooter flex">
        <div class="o1 selfCtenter">
          合计：<span>￥200</span>
        </div>
        <div class="o2 selfCtenter">
          邀请他人代付
        </div>
        <div class="o3 selfCtenter">
          立即支付
        </div>
      </div>
    </div>
    <v-coupon :isshow="isshow"></v-coupon>
    <div class="blackbg" v-if="isshow" @click="isshow = false"></div>
  </div>
</template>
<script>
  import {ctoast, confirmDialog} from '../../common/js/common'
  import Coupon from '../couponCommon/index'
  export default({
    data () {
      return {
        'checked': false,
        'isshow': false
      }
    },
    methods: {
      createToast (text) {
        ctoast(text)
      },
      createConfirmDialog (msg, yesFun, noFun) {
        confirmDialog(msg, yesFun, noFun)
      },
      cancelOrder () {
        let dialog = this.createConfirmDialog('您确实已收到物品了吗？确定后不可返回', function () {
          dialog.close()
        }, function () {
          dialog.close()
        })
      }
    },
    components: {
      'v-coupon': Coupon
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  @import "./addOrder.styl"
</style>
